<template>
  <div class="box">
    <h5>父组件</h5>
    <p>msg:{{ msg }}</p>
    <p>num:{{ num }}</p>

    <p>arr:{{ arr }}</p>

    <pre class="note">
技术实现：事件绑定，事件触发
详细描述：
  1. 事件绑定:需要传递的数据存在在子组件的仓库中，而子组件标签调用时数据尚未完成初始化，
             所以通过事件绑定方法的方式，完成延迟的传递操作
  2. 事件触发:在子组件的vue对象中，存在一个_events记录值，用于记录在子组件标签上绑定的自定义事件，
            通过对自定义事件的执行调用，完成数据在方法参数上的传递，vue通过提供this.$emit 简化调用过程
特征：
  1. 子向父传递的数据，没有保留vue的响应式特性；子组件数据变化，不会主动完成数据的传递和更新
      被动实现响应式同步：
        + 监视器
        + 计算属性分解
  2. 子向父传递的数据，如果是引用类型数据，在地址未发生修改时，会保留响应式
    </pre>
    <ChildComp
      v-on:updateMsg="getMsg"
      @updateArr="getArr"
      @updateNum="getNum"
    ></ChildComp>
    <hr />
    <pre>{{ userList }}</pre>
    <!-- $event : vue提供用于描述事件对应的特殊的参数值
      1. 如果是组件自定义的事件，$event 表示子组件通过$emit回传数据
     -->
    <UserCard
      v-for="(u, i) in userList"
      :user="u"
      @update-name="setUserName(i, $event)"
      @update-phone="setUserPhone(i, $event)"
      :key="i"
    ></UserCard>
  </div>
</template>

<script>
import ChildComp from "./ChildComp";
import UserCard from "./UserCard";
export default {
  components: {
    ChildComp,
    UserCard,
  },
  data() {
    return {
      msg: "",
      arr: [],
      num: 0,
      userList: [
        { name: "炎彬", phone: "016-59606014" },
        { name: "潇然", phone: "18380531165" },
        { name: "子骞", phone: "0105-69679021" },
        { name: "哲瀚", phone: "0466-65643241" },
      ],
    };
  },
  methods: {
    getMsg(arg) {
      console.log("父组件的getMsg方法", arg);
      this.msg = arg;
    },
    getArr(arg) {
      this.arr = arg;
    },
    getNum(arg) {
      this.num = arg;
    },
    setUserName(i, newName) {
      console.log("父组件方法-修改对应对象的name", i, newName);
      this.userList[i].name = newName;
    },
    setUserPhone(i, newPhone) {
      console.log("父组件方法-修改对应对象的phone", i, newPhone);
      this.userList[i].phone = newPhone;
    },
  },
};
</script>
